<template>
  <div ref="echarts"  class="one" style="width:100%;height:350px"></div>
</template>
<script>
import * as echarts from 'echarts';
import { readonly } from 'vue';
import request from '@/utils/request';
export default {
  name: 'EChartsComponent',
  data() {
    return {
      chart: null,
      xAxisData: [],//日期
      totalFriendsData: [],//总数
      newFriendsData: [],//新增数
    };
  },
  mounted() {
    
    this.updateChart();
  },
  created() {
    this.on_line();
  },
  methods: {
    on_line() {
      //console.log(112);
      on_line().then(res => {
        //console.log(res, '筒状图');
        // 解析数据
        this.xAxisData = res.data.map(item => item.yearmonth);
        this.totalFriendsData = res.data.map(item => item.countNum);
        this.newFriendsData = res.data.map(item => item.addNum);
        // 更新图表
        this.updateChart();
      })
    },
    updateChart() {
      var myChart = echarts.init(this.$refs.echarts);
      myChart.clear();
      let listener = function () {
        myChart.resize();
      };
      window.addEventListener("resize", listener);

      var option = {
        title: {
          text: '好友统计',
          top: "1%"
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总好友数', '新增好友数'],
          top: '8%'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: this.xAxisData // 使用动态数据
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: function (value) {
                return value + '位';
              }
            }
          },
          {
            type: 'value',
            axisLabel: {
              formatter: function (value) {
                return value + '位';
              }
            },
            position: 'right',
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '总好友数',
            type: 'bar',
            data: this.totalFriendsData, // 使用动态数据
            barGap: '0%',
            barWidth:'25px',
          },
          {
            name: '新增好友数',
            type: 'line',
            yAxisIndex: 1, // 使用第二个y轴
            data: this.newFriendsData, // 使用动态数据
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};

export function on_line() {
  return request({
    url: '/skmodulemoments/wcFriendInfo/GetFriendCount',
    method: 'get',
  });
}
</script>
<style scoped>

</style>